<script setup name="Profile">
import userInfo from "./userInfo"
import resetPwd from "./resetPwd"
import { getUserProfile } from "@/api/system/user"

const activeTab = ref("userinfo")
const state = reactive({
  user: {},
})

onMounted(() => {
  getUser()
})

function getUser() {
  getUserProfile().then(user => {
    state.user = user
  })
}
</script>

<template>
   <div class="app-container">
      <el-row :gutter="20">
         <el-col :span="7" :xs="24">
            <el-card class="box-card">
               <template v-slot:header>
                 <div class="clearfix">
                   <span>个人信息</span>
                 </div>
               </template>
               <div>
                  <ul class="list-group list-group-striped">
                     <li class="list-group-item">
                        用户名
                        <div class="pull-right">{{ state.user.username }}</div>
                     </li>
                    <li class="list-group-item">
                        真实姓名
                        <div class="pull-right">{{ state.user.nickName }}</div>
                     </li>
                     <li class="list-group-item">
                        手机号码
                        <div class="pull-right">{{ state.user.phoneNumber }}</div>
                     </li>
                     <li class="list-group-item">
                        邮箱地址
                        <div class="pull-right">{{ state.user.email }}</div>
                     </li>
                    <li class="list-group-item">
                      状态
                      <div class="pull-right">{{ state.user.status }}</div>
                    </li>
                    <li class="list-group-item">
                        性别
                        <div class="pull-right">{{ state.user.sex }}</div>
                     </li>
                    <li class="list-group-item">
                        隶属部门
                        <div class="pull-right" v-if="state.user.deptName">{{ state.user.deptName }} </div>
                     </li>
                  </ul>
               </div>
            </el-card>
         </el-col>
         <el-col :span="17" :xs="24">
            <el-card>
               <template v-slot:header>
                 <div class="clearfix">
                   <span>基本资料</span>
                 </div>
               </template>
               <el-tabs v-model="activeTab">
                  <el-tab-pane label="基本资料" name="userinfo">
                     <userInfo :user="state.user" />
                  </el-tab-pane>
                  <el-tab-pane label="修改密码" name="resetPwd">
                     <resetPwd />
                  </el-tab-pane>
               </el-tabs>
            </el-card>
         </el-col>
      </el-row>
   </div>
</template>
